{extend name='public/base' /}

{block name='content'}
<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="table" lay-filter="test"></table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添 加</button>
        <button class="layui-btn layui-btn-sm" lay-event="allDel">删 除</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>删除
    </a>
</script>

<form class="layui-form" id="form" style="display: none" lay-filter="form">
    <div style="margin-top: 50px;"></div>
    <div class="layui-form-item">
        <label class="layui-form-label">音乐名称</label>
        <div class="layui-inline">
            <input type="text" name="title" lay-verify="required" placeholder="请输入音乐名称" lay-reqtext="音乐名称不能为空"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">演唱者</label>
        <div class="layui-inline">
            <input type="text" name="author" lay-verify="required" placeholder="请输入演唱者名称" lay-reqtext="演唱者名称不能为空"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">作品状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="正常" checked="">
            <input type="radio" name="status" value="0" title="下架">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">封面</label>
        <div class="layui-upload-drag" id="test10">
            <i class="layui-icon"></i>
            <p>上传商品主图<br>建议200*200</p>
            <div class="layui-hide" id="uploadDemoView">
                <img src="" alt="上传成功后渲染" style="max-width: 148px">
            </div>
        </div>
        <input type="hidden" name="pic" id="pic">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上传音频</label>
        <div class="layui-input-block">
            <a class="layui-btn layui-btn" id="test6">
                <i class="layui-icon"></i>上传音频
            </a>
            <br>
            <input type="hidden" name="url">
            <input type="hidden" name="file_name">
            <input type="hidden" name="size">
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="video-progress">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
            <div class="layui-form-mid layui-word-aux" id="music_name"></div>
        </div>
    </div>
</form>
<input type="hidden" id="token" name="token" value="{$token}">
<input type="file" id="fileBtn" style="display: none">

<script type="text/html" id="statusDome">
    {{#  if(d.status == 1 ){ }}
    <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="disable">正常</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="enable">已禁用</a>
    {{#  } }}
</script>
{/block}

<!---->

{block name='js'}
<script>
    layui.use(['table', 'form', 'upload', 'element'], function () {
        let $ = layui.$,
            form = layui.form,
            table = layui.table,
            element = layui.element,
            upload = layui.upload;
        //表格数据
        table.render({
            id: 'testReload',
            elem: '#table',
            toolbar: '#toolbarDemo',
            method: 'post',
            url: '/manage/projects/music/getList',
            title: '文件列表',
            cols: [[
                {type: 'numbers', align: 'center'},
                {type: 'checkbox'},
                {field: 'id', title: 'ID', minWidth: 80, hide: true},
                {field: 'title', title: '音乐名称', minWidth: 120, align: 'center'},
                {field: 'author', title: '演唱者', minWidth: 120, align: 'center'},
                {field: 'status', title: '状态', minWidth: 120, align: 'center', toolbar: '#statusDome'},
                {field: 'createTime', title: '添加日期', minWidth: 150, align: 'center'},
                {fixed: 'right', title: '操作', toolbar: '#barDemo', minWidth: 150, align: 'center'}
            ]],
            page: true
        });
        //工具栏事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':  //添加
                    addData();
                    break;
                case 'allDel':  //多选删除
                    let data = checkStatus.data;
                    delData(data);
                    break;
            }
        });
        //监听工具条
        table.on('tool(test)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'edit':
                    editData(data);
                    break;
                case 'del':
                    delData([data]);
                    break;
            }
        });

        //拖拽上传
        upload.render({
            elem: '#test10',
            data: {'status': 1, 'type': 'music_pic'},
            url: '/manage/system/upload/image',
            done: function (res) {
                if (res.code === 0) {
                    $('#test10').css('padding', '0');
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
                    $('#test10 i, p').hide();
                    $("input[name='pic']").val(res.data.path);
                } else {
                    layer.msg(res.message);
                }
            }
        });

        //音乐文件上传
        upload.render({
            elem: '#test6',
            url: '/manage/system/upload/music',
            accept: 'file', //普通文件
            progress: function (n, elem, res, index) {
                let percent = n + '%' //获取进度百分比
                element.progress('demo', percent); //可配合 layui 进度条元素使用

                console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
                console.log(res); //得到 progress 响应信息
                console.log(index); //得到当前上传文件的索引，多文件上传时的进度条控制，如：
                element.progress('demo-' + index, n + '%'); //进度条
            },
            done: function (res) {
                if (res.code === 0) {
                    layer.msg('上传成功');
                    $('#music_name').html(res.data.title);
                    $("input[name='file_name']").val(res.data.title);
                    $("input[name='url']").val(res.data.path);
                    $("input[name='size']").val(res.data.size);
                } else {
                    layer.msg(res.message);
                }
            }
        });

        //添加
        function addData() {
            $("#form")[0].reset();
            $('#test10').css('padding', '30px');
            $('#test10 i, p').show();
            $('#uploadDemoView').addClass('layui-hide');
            $('.zs-img').remove();
            $('#path').val('');
            $('#music_name').html('');
            layer.open({
                type: 1,
                title: '添加音乐',
                content: $('#form'),
                area: ['40%', '700px'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    let data = form.val('form');
                    if (!data.url) {
                        layer.msg('请选择音乐文件！');
                        return false;
                    }
                    $.ajax({
                        'type': 'post',
                        'data': data,
                        'url': '/manage/projects/music/add',
                        success: function (res) {
                            if (res.code === 0) {
                                layer.close(index);
                                layer.msg('添加成功');
                                table.reload('testReload');
                            } else {
                                layer.msg(res.message);
                            }
                        }
                    });
                },
                btn2: function (index, layero) {
                    layer.close(index);
                }
            });
        }

        function editData(arr) {
            form.val('form', {
                'title': arr.title,
                'author': arr.author,
                'status': arr.status,
                'url': arr.url,
                'pic': '',
            });
            $('#music_name').html(arr.fileName);
            console.log((arr.pic.src).length);
            if ((arr.pic.src).length > 0) {
                $('#test10').css('padding', '0');
                $('#test10 i, p').hide();
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', arr.pic.src);
            } else {
                $('#test10').css('padding', '30px');
                $('#test10 i, p').show();
                $('#uploadDemoView').addClass('layui-hide');
                $('.zs-img').remove();
                $('#path').val('');
            }
            layer.open({
                type: 1,
                title: '修改音乐',
                content: $('#form'),
                area: ['40%', '700px'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    let data = form.val('form');
                    data['id'] = arr.id;
                    $.ajax({
                        'type': 'post',
                        'data': data,
                        'url': '/manage/projects/music/update',
                        success: function (res) {
                            if (res.code === 0) {
                                layer.close(index);
                                layer.msg('修改成功');
                                table.reload('testReload');
                            } else {
                                layer.msg(res.message);
                            }
                        }
                    });
                },
                btn2: function (index, layero) {
                    layer.close(index);
                }
            });
        }

        //删除
        function delData(data) {
            layer.confirm('确定删除这些数据吗？', function (index) {
                $.post('/manage/projects/music/delete',
                    {data: data},
                    function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功')
                            table.reload('testReload');
                        } else {
                            layer.msg(res.message);
                        }
                    }
                );
            })
        }

    });
</script>
{/block}